<template>
  <div class="login-box">
    <el-row>
      <el-col :span="14" class="logo-bg">
        <img src="@/assets/logo-new.png" class="logo-img" alt="logo">
      </el-col>
      <el-col :span="10" class="form-part">
        <div class="title">登录</div>
        <div class="sub-title">您好！欢迎来到井松物联网平台</div>
        <el-form
          ref="loginForm"
          autocomplete="on"
          label-position="left"
        >
          <el-form-item prop="username">
            <el-input
              ref="username"
              placeholder="用户名"
              name="username"
              type="text"
              tabindex="1"
              autocomplete="on"
              class="username"
            >
            </el-input>
          </el-form-item>

          <el-tooltip
            content="大写锁定开启"
            placement="right"
            manual
          >
            <el-form-item prop="password">
              <el-input
                ref="password"
                placeholder="登录密码(您的密码需至少6位)"
                name="password"
                class="password"
                tabindex="2"
                autocomplete="on"
              >
                <span slot="append" style="cursor: pointer;" class="show-pwd">
                </span>
              </el-input>
            </el-form-item>
          </el-tooltip>
          <el-button
            type="primary"
            class="login-btn"
          >
            登录
          </el-button>
          <a
            href="https://beian.miit.gov.cn/#/Integrated/index"
            target="_blank"
            class="record"
          >ICP备案/许可证号： 皖ICP备17000970号-3</a>
        </el-form>

      </el-col>
    </el-row>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue"
const username = ref('')
const password = ref('')
</script>
<style scoped>
html, body, #app {
    height: 100%;
    margin: 0;
    padding: 0;
}
.login-box {
  height: 100%;
  min-width: 980px;
  .el-row {
    height: 100%;
  }
  .logo-bg {
    .logo-img {
      width: 220px;
      height: 67px;
      position: absolute;
      top: 56px;
      left: 72px;
    }
    height: 100%;
    background-image: url('../assets/logo-bg.png');
  }
  .form-part {
    padding: 120px 80px 80px;
    height: 100%;
    position: relative;
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(5px);
    .title {
      color: #000;
      font-size: 44px;
      font-style: normal;
      font-weight: 600;
      line-height: 100%;
    }
    .sub-title {
      margin: 24px 0 109px;
      color: var(--light-neutral-color-text-text-3, #8d93a6);
      font-size: 16px;
      font-weight: 500;
    }
    .login-btn {
      width: 100%;
      margin: 40px auto 50px;
      color: var(--dark-neutral-color-text-text-1, #FFF);
      font-feature-settings: 'clig' off, 'liga' off;
      font-size: 20px;
      font-style: normal;
      font-weight: 600;
      line-height: 20px;
      height: 54px;
    }
    .img-code {
      width: 100%;
      height: 40px;
      background-color: #e6e9f2;
      cursor: pointer;
    }
    .record{
      color: var(--light-neutral-color-text-text-3, #8d93a6);
      font-size: 16px;
      font-style: normal;
      font-weight: 500;
      line-height: 100%;
    }
  }
}
</style>
